<template>
  <div ref="print">
      <div
      class="A4pageP"
      id="pdfDomD"
      v-for="(item, index) in listData"
      :key="index + 10220"
      >
      <img src="@/assets/logo/pdfbg.png" alt="" />
      
      <div class="pagesContent">
          <div class="pagesContentItem">
          <div class="pagesContentTitle">
              <span v-if="item.gz=='职业卫生'">职业卫生培训合格证</span>
              <span v-else>培训学时证明</span>
          </div>
          <div
              class="pagesContentitemInfor"
          >
              <ul>
              <li class="Title">姓名</li>
              <i>:</i>
              <li class="Name">{{ item.nickname }}</li>
              </ul>
              <ul>
              <li class="Title">性别</li>
              <i>:</i>
              <li class="Name">{{ item.gender }}</li>
              </ul>
              <ul>
              <li class="Title">身份证号</li>
              <i>:</i>
              <li class="Name">{{ item.username }}</li>
              </ul>
              <ul>
              <li class="Title">培训科目</li>
              <i>:</i>
              <li class="Name">
                  职业卫生培训
              </li>
              </ul>
              <ul>
              <li class="Title">培训类型</li>
              <i>:</i>
              <li class="Name">
                  {{ item.exam_type }}
              </li>
              </ul>
              <ul>
              <li class="Title">人员类别</li>
              <i>:</i>
              <li class="Name">
                  {{ item.subjectTitleFull.includes('初培')?item.subjectTitleFull.split('初培')[0]:item.subjectTitleFull.includes('复审')?item.subjectTitleFull.split('复审')[0]:'' }}
              </li>
              </ul>
              <ul>
              <li class="Title">公司名称</li>
              <i>:</i>
              <li class="Name">{{ item.company }}</li>
              </ul>
              <!--       :src="item.exam_face" -->
              <div
              class="imgBox"
              v-if="item.face"
              >
              <div style="margin-right: 20px" v-if="item.face">
                  <div>
                  <img :src="item.face" alt="" />
                  </div>
                  <p>人脸底片</p>
              </div>

              <!-- <div
              >
                  <div>
                  <img :src="item.exam_face" alt="" />
                  </div>
                  <p>考试照片</p>
              </div> -->
              </div>
          </div>
          <div class="pagesContentitemRocer">
              学员{{ item.nickname }}于{{
              item.start_time
              }}
              <!-- start_time -->
              ——
              {{
              item.score_finish_time
              }}职业卫生培训班完成线上学习要求，并考试合格。特发此证，以此证明。
          </div>
          <div class="pagesContentitemXs">
              <span class="pagesContentitemXsSpan"
              >培训内容：合计{{ item.score_sum }}学时</span
              >
              <div class="tableBox">
              <div
                  :class="
                  index % 2 == 0
                      ? item.score_loglist.length % 2 == 0
                      ? index == item.score_loglist.length - 2
                          ? 'table beforeBorder bottomBorder'
                          : 'table beforeBorder'
                      : index == item.score_loglist.length - 1
                      ? 'table beforeBorder bottomBorder'
                      : 'table beforeBorder'
                      : item.score_loglist.length % 2 == 0
                      ? index == item.score_loglist.length - 1
                      ? 'table bottomBorder'
                      : 'table'
                      : index == item.score_loglist.length - 2
                      ? 'table bottomBorder'
                      : 'table'
                  "
                  v-for="(itemA, index) in item.score_loglist"
                  :key="itemA.msid"
              >
                  <p>{{ itemA.mstitle?itemA.mstitle:itemA.title }}</p>
                  <span>{{ itemA.score }}学时</span>
              </div>
              </div>
          </div>
          <div
              class="pagesContentitemFs"
          >
              <div>
              <p>{{ item.subjectTitle }}培训考试题库(80分合格)</p>
              <span>合格</span>
              </div>
          </div>
          
          <div class="pagesContentitemFooter">
              <div class="pagesContentitemFooterBox">
              <div class="pagesContentitemFooterBoxLeft">
                  <p>证书编号:</p>
                  <span>{{ item.cert_num }}</span>
              </div>
              <!-- 二维码 -->
              <!-- <img
                  class="erweima"
                  :src="erma"
                  alt=""
              />
              <img
                  class="erweima"
                  :src="item.resourceserma"
                  alt=""
                  style="left:18%;"
              /> -->
              <div class="pagesContentitemFooterBoxRight">
                  <p>发证时间:</p>
                  <span>{{ item.score_finish_time }}</span>
              </div>
              </div>
              <!-- 印章  v-if="!qyType('whtl')"  -->
              <!-- <img
              style="left: 50%"
              src="@/assets/zhang/tjyx.png"
              alt=""
              /> -->
              <img
              :src="sealImgList(baseURL, listData[0].gz)"
              alt=""
              v-if="sealImgList(baseURL, listData[0].gz)"
              />
          </div>
          </div>
      </div>
      </div>
  </div>
</template>
<script>
export default {
  
    data() {
        return {
            dialogVisible: false,
            htmlTitle: '证书打印',
            fromData:{
                nickname:'',//姓名
                username:'',//身份证号
                update_time:'',//发证日期
                start_time:'',//开始时间
                score_finish_time:'',//发证日期
                gender:'',//性别
                subjectTitle:'',//培训科目
                score_loglist:[
                ],
                score_sum:0,//学时合计
                cert_num:1010011101111,//证书编号
                subjectTitleFull:''
            },
            listData:[],
            baseURL:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),
        };
    },
    watch:{
      fromData:{
        handler(val) {
          this.listData=[val]
        },
        deep: true,
      }
    },
    methods: {
        open(item){
            // if(this.$moment(item.start_time)){  
            //   obj = {start_time:this.$moment(item.start_time).format("YYYY年MM月DD日"),score_finish_time:this.$moment(item.score_finish_time).format("YYYY年MM月DD日")}
            // }
            Object.assign(this.fromData,item)
            // this.listData=[this.fromData]
        },
    },
}
</script>
<style lang="scss" scoped>
.A4pageP {
  width: 595px;  //calc(595.28px * 2)
  height:842px ;//calc(846.1px * 2)
  // width:calc(595px * 1.5);
  // height:calc(840px * 1.5); 
  // background:url('~@/assets/logo/pdfbg.png') no-repeat;
  // background-size: 100%;
  overflow: hidden;
  color: #000;
  position: relative;
  top: 0;
  left: 0;
  & > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 30;
  }
  .pagesContent {
    position: absolute;
    top: 0;
    z-index: 10000000;
    width: 100%;
    height: 100%;
    padding: 22.5px 50px;
    overflow: auto;
    .pagesContentItem {
      height: calc(100%);
      .pagesContentTitle {
        width: 100%;
        height: 65px;
        // background: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        span {
          font-size: 20px;
        }
      }
      .pagesContentitemRocer {
        font-size: 12px;
        text-indent: 24px;
        min-height: 40px;
        // background: #fff;
      }
      .pagesContentitemXs {
        // background: #0f0;
        height: 365px;
        .pagesContentitemXsSpan {
          font-size: 10px;
        }
        .table {
          // border:1px solid #333;
          height: 35px;
          width: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: 1px solid #333;
          &::after {
            content: "";
            height: 35px;
            width: 1px;
            background: #333;
          }
          p {
            padding: 0 10px;
            margin: 0;
            flex: 1;
            // font-size: 20px;
          }
          span {
            display: flex;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            width: 60px;
            height: 100%;
            align-items: center;
            border-left: 1px solid #333;
          }
        }
        .tableBox {
          display: flex;
          padding: 10px 0;
          flex-wrap: wrap;
          .beforeBorder {
            &::before {
              content: "";
              height: 35px;
              width: 1px;
              background: #333;
            }
          }
          .bottomBorder {
            border-bottom: 1px solid #333;
          }
          p{
            font-size: 12px;
          }
          span{
            font-size: 14px;
          }
        }
      }
      .pagesContentitemFs {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        div {
          // border:1px solid #333;
          height: 25px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: 1px solid #333;
          border-bottom: 1px solid #333;
          border-left: 1px solid #333;
          &::after {
            content: "";
            height: 25px;
            width: 1px;
            background: #333;
          }
          p {
            text-align: center;
            padding: 0 10px;
            margin: 0;
            flex: 1;
            font-size: 10px;
          }
          span {
            display: flex;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            width: 40%;
            height: 100%;
            align-items: center;
            border-left: 1px solid #333;
          }
        }
      }
      .pagesContentitemInfor {
        position: relative;
        padding-left: 25px;
        margin-bottom: 10px;
        // height: 140px;
        ul {
          line-height: 25px;
          display: flex;
          font-size: 12px;
          font-family: "黑体";
          margin: 0;
          .Title {
            width: 48px;
            text-align-last: justify;
            text-align: justify;
          }
        }
        .imgBox {
          position: absolute;
          right: 0;
          top: 10px;
          width: 250px;
          // height: 180px;
          display: flex;
          justify-content: flex-end;
          & > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            & > div {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 80px;
              border: 1px solid #eee;
              & > img {
                max-width: 60px;
              }
            }
            & > p {
              margin: 0;
              margin-top: 10px;
            }
          }
        }
      }

      .pagesContentitemFooter {
        height: 90px;
        // background: #00f;
        padding: 0 25px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        font-size: 12px;
        position: relative;
        .pagesContentitemFooterBox {
          width: 100%;
          // background: #0ff;
          display: flex;
          justify-content: space-between;
          font-family: "黑体";
          font-weight: 600;
          .erweima {
            position: absolute;
            width: 60px;
            height: 60px;
            bottom: 22%;
            left: 5%;
          }
          .pagesContentitemFooterBoxLeft {
            display: flex;
            align-items: center;
            p {
              margin: 0;
            }
          }
          .pagesContentitemFooterBoxRight {
            display: flex;
            align-items: center;
            min-width: 150px;
            p {
              margin: 0;
            }
          }
        }
        & > img {
          position: absolute;
          height: 100px;
          width: 100px;
          left: 75%;
          top: 30%;
          z-index: -1;
        }
      }
    }
  }
}
</style>